import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { View, TouchableOpacity, Image, Text } from 'react-native'
import styles from './Styles/ShortcutGridStyle'

export default class ShortcutGrid extends Component {
  // // Prop type warnings
  static propTypes = {
    data: PropTypes.array,
    navigation: PropTypes.object,
  }

  // Defaults for props
  static defaultProps = {
    data: null
  }

  render () {
    if (!this.props.data) {
      return null
    }
    const { navigate } = this.props.navigation
    return (
      <View style={styles.container}>
        {this.props.data.map((item,i) =>
          <View key={i}
            style={{width:'20%',alignItems:'center'}}>
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={()=>item.name != '联盟酒店' ? navigate('CommodityScreen', {initial:i}) : navigate('HotelScreen')}>
              <Image
                source={{uri:item.img}}
                style={{width:42,height:42,marginVertical:5}} />
            </TouchableOpacity>
            <Text style={{fontSize:12}}>{item.name}</Text>
          </View>
        )}
      </View>
    )
  }
}
